<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../tf-dashboard-common/tensorboard-color.html">

<!--
tf-x-type-selector is a simple component that creates buttons labeled "step" and "wall",
  and provides (as upward bindable) an outXType property that is either "step" or "wall_time".
-->
<dom-module id="tf-x-type-selector">
  <template>
    <div id="buttons">
      <h3>Horizontal Axis</h3>
      <paper-button
        class="x-button selected"
        id="step"
        on-tap="_select"
      >
      step
      </paper-button>
      <paper-button
        class="x-button"
        id="relative"
        on-tap="_select"
      >
      relative
      </paper-button>
      <paper-button
        class="x-button"
        id="wall_time"
        on-tap="_select"
      >
      wall
      </paper-button>
    </div>
    <style>
      .x-button {
        width: 30%;
        font-size: 13px;
        background: none;
        margin-top: 10px;
        color: var(--tb-ui-dark-accent);
      }

      .x-button:first-of-type {
        margin-left: 0;
      }

      .x-button.selected {
        background-color: var(--tb-ui-dark-accent);
        color: white!important;
      }

      #buttons h3 {
        color: var(--paper-grey-800);
        margin: 0;
        font-weight: normal;
        font-size: 14px;
        margin-bottom: 5px;
      }
    </style>
  </template>
  <script>
    Polymer({
      is: "tf-x-type-selector",
      properties: {
        outXType: {type: String, notify: true, readOnly: true, value: "step"},
      },
      _select: function(e) {
        var _this = this;
        ["step", "wall_time", "relative"].forEach(function(id) {
          _this.$[id].classList.remove("selected");
        });
        this._setOutXType(e.currentTarget.id);
        e.currentTarget.classList.add("selected");
      },
    });
  </script>
</dom-module>
